<template>
  <el-dialog

    title="报告路况"
    width="1000"
    draggable
    overflow
    :close-on-click-modal="false"
    @open="handleOpen"
  >
    <div class="control">
      <el-input
        v-model="descriptionReport"
        placeholder="请详细描述事件"
        size="large"
        style="width: 240px"
      />
      <el-button @click="handleFilter" size="large" class="el-button--left"
        ><i class="iconfont icon-shuaxin"></i
      ></el-button>
      <el-button @click="exportExcel" size="large"
        ><i class="iconfont icon-excel1"></i
      ></el-button>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="name" label="用户名" width="80" />
      <el-table-column prop="type" label="事件类型" width="100" />
      <el-table-column prop="address" label="事件地址" />
      <el-table-column prop="signage" label="附近建筑" width="100" />
      <el-table-column prop="time" label="发生时间" />
      <el-table-column prop="describe" label="事件描述" />
      <el-table-column label="操作">
        <template #default="scope">
          <template v-if="scope.row.status === 0">
            <div class="el-button-group">
              <el-button
                type="primary"
                class="refuse"
                @click="handleDelete(scope.row.id)"
                >忽略</el-button
              >
              <el-button
                type="primary"
                class="pass"
                @click="handlePass(scope.row.id)"
                >通过</el-button
              >
            </div>
          </template>
          <template v-else> 已审核 </template>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 
          :current-page="currentPage" 当前页码
          :page-size="limit" 每页显示条数
          :total="props.modalData.attrValues.length" 总条数
          @current-change="handleCurrentChange" 切换页码时触发
    -->
    <el-pagination
      size="small"
      background
      layout="prev, pager, next"
      :page-size="limit"
      :total="middleData.length"
      :current-page="currentPage"
      @current-change="handleCurrentChange"
    />
  </el-dialog>
</template>

<script setup>
import { getReportHttp, delReportHttp, updateReportHttp } from '@/request'
import { ref, computed } from 'vue'
import * as XLSX from 'xlsx'
function handleOpen() {
  console.log(1)
  // 获取报告数据
  getReportHttp().then((res) => {
    result.value = res.data
  })
}
let result = ref([])
const descriptionReport = ref('')
// 分页逻辑
const limit = 4
const middleData = ref([])
const currentPage = ref(1)
// 更新currentPage
const handleCurrentChange = (val) => {
  currentPage.value = val
}
/* 表格的数据由以下计算属性得到*/
const tableData = computed({
  get: () => {
    // 如果输入框有值，则过滤数据
    let filterData = result.value
    if (descriptionReport.value) {
      filterData = result.value.filter(
        (item) =>
          item.name.includes(descriptionReport.value) ||
          item.type.includes(descriptionReport.value) ||
          item.address.includes(descriptionReport.value) ||
          item.signage.includes(descriptionReport.value) ||
          item.describe.includes(descriptionReport.value)
      )
    }
    middleData.value = filterData
    const start = (currentPage.value - 1) * 4
    const end = start + limit
    return filterData.slice(start, end)
  },
  set: (val) => {
    console.log(val)
  },
})

// 调用接口，根据id删除数据
function handleDelete(id) {
  console.log(id)
  delReportHttp({ id }).then(() => {
    // 刷新数据
    result.value = result.value.filter((item) => item.id !== id)
  })
}
// 调用接口，根据id修改status的值为1
function handlePass(id) {
  updateReportHttp({ id }).then(() => {
    // 刷新数据
    result.value = result.value.map((item) => {
      if (item.id === id) {
        item.status = 1
      }
      return item
    })
  })
}

/* 导出excel表 */
const exportExcel = () => {
  // 创建工作簿
  const workbook = XLSX.utils.book_new()
  // 将表格数据转换为工作表
  const worksheet = XLSX.utils.json_to_sheet(tableData.value)
  // 将工作表添加到工作簿
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1')
  // 导出 Excel 文件
  XLSX.writeFile(workbook, '路况信息报告.xlsx')
}
// 点击过滤掉已审核的数据
function handleFilter() {
  result.value = result.value.filter((item) => item.status === 0)
  tableData.value = result.value
}
</script>

<style scoped>
.el-button--primary {
  align-items: center;
  margin: 10px auto;
  display: block;
}
.el-button--primary.refuse {
  background-color: green;
  border-color: green;
}
.el-button--primary.pass {
  background-color: red;
  border-color: red;
}

.control {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 10px;
}

.el-button {
  margin: 0px;
}
:deep(.el-table__row) {
  height: 85px;
}
.el-pagination {
  margin-top: 10px;
}
.el-button-group {
  box-sizing: border-box;
  display: flex;
  /* flex-direction: column; */
  gap: 10px;
}
</style>
